<template>
  <div class="qiu-cls">
    <div class="circleeffectclass aroundfunctioneffect">
      <img class="effectposition xqxz-animation" src="/src/assets/wbe4/q-b-img.png">
      <div class="effectposition acrossremindeffectout acrossremindeffectoutard">
        <div class="acrossremindeffectin acrossremindeffectinard"></div>
      </div>
      <span>{{ labelName }}</span>
    </div>
  </div>
</template>
<script setup>
const props = defineProps(['labelName', 'labelValue', 'iconIndex'])
</script>

<style lang="scss" scoped>
.qiu-cls {
  .circleeffectclass {
    border-radius: 50%;
    border: rgba(0, 168, 255, 0.6) 1px solid;
    cursor: pointer;
    position: absolute;
  }

  .aroundfunctioneffect {
    width: 76px;
    height: 76px;
  }

  .acrossremindeffectin {
    background-color: rgba(0, 126, 255, 0.3);
    border-radius: 50%;
    margin: auto;
  }

  .effectposition {
    position: absolute;
  }

  .xqxz-animation {
    animation: xqlzd linear infinite 3.8s forwards;
  }

  .acrossremindeffectout {
    background-color: rgba(0, 126, 255, 0.05);
    border-radius: 50%;
  }

  .acrossremindeffectoutard {
    width: 60px;
    height: 60px;
    margin: 8px;
  }

  .acrossremindeffectinard {
    width: 54px;
    height: 54px;
    margin: 3px;
  }

  @keyframes xqlzd {
    0% {
      transfrom: rotate(0deg);
    }

    25% {
      transform: rotate(-90deg);
    }

    50% {
      transform: rotate(-180deg);
    }

    75% {
      transform: rotate(-270deg);
    }

    100% {
      transform: rotate(-360deg);
    }
  }
}
</style>
